<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three-Way Decision Visualization</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="main-title">Three-Way Decision Visualization</h1>
    <div class="container">
        <div class="main-content">
            <div class="canvas-container">
                <svg id="decisionCanvas" width="600" height="400"></svg>
            </div>
            
            <div class="info-panel">
                <div id="intersectionInfo"></div>
            </div>
        </div>
        
        <div class="side-panel">
            <div class="controls-container">
                <div class="control-group">
                    <h4>left Point (x=0)</h4>
                    <div class="control-item">
                        <label for="point1">λ<sub>NN</sub>:</label>
                        <input type="number" id="point1" min="0" max="1" step="0.01" class="point-input">
                    </div>
                    <div class="control-item">
                        <label for="point2">λ<sub>BN</sub>:</label>
                        <input type="number" id="point2" min="0" max="1" step="0.01" class="point-input">
                    </div>
                    <div class="control-item">
                        <label for="point3">λ<sub>PN</sub>:</label>
                        <input type="number" id="point3" min="0" max="1" step="0.01" class="point-input">
                    </div>
                </div>
                <div class="control-group">
                    <h4>right Point (x=1)</h4>
                    <div class="control-item">
                        <label for="point4">λ<sub>NP</sub>:</label>
                        <input type="number" id="point4" min="0" max="1" step="0.01" class="point-input">
                    </div>
                    <div class="control-item">
                        <label for="point5">λ<sub>BP</sub>:</label>
                        <input type="number" id="point5" min="0" max="1" step="0.01" class="point-input">
                    </div>
                    <div class="control-item">
                        <label for="point6">λ<sub>PP</sub>:</label>
                        <input type="number" id="point6" min="0" max="1" step="0.01" class="point-input">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html> 